<template>
  <div class="shop_car">
    <div class="header" :style="'height: ' + navBarHeight + 'rpx' ">
        <div class="header_top" :style="'padding-top:' + statusBarHeight + 'rpx'">
            <div class="back" @click="goBack">{{sign}}</div>
              <div class="nav">购物车</div>  
        </div>
    </div>
    <div class="content" :style="'margin-top: ' + navBarHeight + 'rpx'">
        <div class="list" v-for="(item,index) in list" :key="index">
            <checkbox-group @change="onChange(item,list,index)">
							<checkbox :checked="item.checked" />
						</checkbox-group>
            <div class="list_info">
                <image :src="item.img" />
                <div class="list_total">
                    <div class="title">{{item.title}}</div>
                    <div class="list_total_t">
                        <div class="cations">
                          <div class="cations_info" v-for=" (item,i) in item.cations " :key="i">
                            <div v-for="(items,idx) in item" :key='idx'>
                              <span>{{idx}}/{{items}}</span>  
                            </div>    
                          </div>
                        </div>
                        <div class="price">¥{{item.price}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="width:100%;height:220rpx;"></div>
    <div class="footer">
        <div class="footer_l">
            <div class="footer_check" @click="allchecked(list)">
	              <checkbox :checked="all_checked" />
                <div class="all">全选</div>
            </div>	
        </div>
        <div class="footer_r">
            <div class="footer_total">合计: <span>¥{{all_price}}</span></div>
            <div class="Settlement" @click="complete">{{f_sign}}({{all_number}})</div>
        </div>
    </div>
    <vue-tab-bar @fetch-index="clickIndexNav" :selectNavIndex=1 :needButton="needButton" :handButton="handButton" :btnText="btnText"></vue-tab-bar>  
  </div>
</template>

<script>
import vueTabBar from '../../components/tabber/index'
export default {
  components: {
    vueTabBar
  },
  data () {
    return {
      sign:'管理',
      f_sign:'结算',
      rex:-1,
      statusBarHeight:'',  //状态栏高度
      platform:'',   //客户端平台
      titleBarHeight:'', //标题栏高度
      navBarHeight:'',  //导航栏总体
      list:[
        {img:'/static/images/img.png',title:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',price:99.99,num:1,
            cations:[
                {红色:120}
              ]
        },
        {img:'/static/images/img.png',title:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',price:99.99,num:1,
            cations:[
                {红色:120}
              ]
        },
        {img:'/static/images/img.png',title:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',price:99.99,num:1,
            cations:[
                {红色:120}
              ]
          },
          {img:'/static/images/img.png',title:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',price:99.99,num:1,
            cations:[
                {红色:120}
              ]
          },
          {img:'/static/images/img.png',title:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',price:99.99,num:1,
            cations:[
                {红色:120}
              ]
          },
      ],
      arr:[],             //存放单选
      str:[],             //存放价格
      all_checked:false,  //全选
      all_price:'0.00'     //总价钱
    }
  },
  onLoad(){
    var that = this
      wx.getSystemInfo({
        success (res) {
          // console.log(res)
          that.statusBarHeight = res.statusBarHeight*2
          that.platform = res.platform
          let platformReg = /ios/i;
          if (platformReg.test(that.platform)) {
              that.titleBarHeight = 88;
          } else {
              that.titleBarHeight = 96;
          }
          that.navBarHeight = that.statusBarHeight + that.titleBarHeight;
        }
      })
      this.list.map((item,index)=>{
          item.checked = false
      })
  },
  methods: {
      //管理
      goBack(){
        this.list.map((item,index)=>{
              item.checked = false
        })
        this.all_checked=false
        this.all_price='0.00'
        this.str.map((key,id)=>{
          this.str.splice(this.str.indexOf(key),this.str.length)
        })
        this.arr.map((key,id)=>{
          this.arr.splice(this.arr.indexOf(key),this.arr.length)
        })
        if(this.sign=='管理'){
          this.sign='完成'
          this.f_sign='删除'
          
        }else{
          this.sign='管理'
          this.f_sign='结算'
        }
      },
      // 单选
      onChange(item,list,index){
        if(item.checked==false){
            item.checked=true
            this.arr.push(index)
            this.str.push(item.price)
            this.total_price()
        }else{
            item.checked=false
            this.str.splice(this.str.indexOf(item.price),1)
            this.arr.splice(this.arr.indexOf(index),1)
            this.total_price()
        }
        this.all_checked = this.arr.length == list.length 
      },
      //全选
      allchecked(list){
        this.all_checked = !this.all_checked
        var money= 0
        if(this.all_checked==true){  
          list.map((item,index)=>{
              item.checked = true
              if(this.arr.length<list.length){
                  this.arr.push(index)
              }
              this.str.push(item.price)
              money += item.price
              this.all_price=money.toFixed(2)
          })
        }else{
           list.map((item,index)=>{
              item.checked = false
           })
          this.str.map((key,id)=>{
            this.str.splice(this.str.indexOf(key),this.str.length)
          })
          this.arr.map((key,id)=>{
            this.arr.splice(this.arr.indexOf(key),this.arr.length)
          })
          this.all_price='0.00'
        }
      },
      // 商品总价
      total_price(){
         var money = 0
         if(this.str.length>0){
          this.str.map((key,id)=>{
              money += key
              this.all_price=money.toFixed(2)
          })
        }else{
          this.all_price='0.00'
        }
      },
      // 结算，删除
      complete(){
        if(this.f_sign=='结算'){
          console.log('结算')
        }else{
          console.log('删除')
        }
      }
  },
  computed: {
    all_number(){  //总数量
      return this.str.length
    }
  }
}
</script>

<style  lang="less">
html{
  background: #f5f5f5
}
.shop_car{
    width: 100%;
    position: absolute;
    background: #f5f5f5;
    .header{
      width: 100%;
      background: #fff!important;
      z-index: 99999;
      color: #000;
      font-size: 34rpx;
      position: fixed;
      top: 0;
      .header_top{
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        background: #fff;
        .back{
          margin-right: 244rpx;
          margin-left: 24rpx;
          white-space: nowrap;
          padding-top: 16rpx;
          font-size: 24rpx;
          box-sizing: border-box;
        }
        .nav{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-top: 16rpx;
          font-size: 34rpx;
          box-sizing: border-box;
        }
      } 
    }
    .content{
      width: 100%;
      height: 100%;
      padding: 30rpx ;
      box-sizing: border-box;
      background: #f5f5f5;
      .list{
        width: 100%;
        height: 220rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40rpx;
        .list_info{
          width: 624rpx;
          height: 220rpx;
          background: #fff;
          padding: 0 20rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          border-radius:10rpx;
          image{
            width: 170rpx;
            height: 170rpx;
          }
          .list_total{
            margin-left: 8rpx;
            height: 170rpx;
            width: 412rpx;
            .title{
              font-size:24rpx;
              overflow:hidden;
              text-overflow: ellipsis;//显示省略号
              display:-webkit-box;
              -webkit-line-clamp:2;//块元素显示的文本行数
              -webkit-box-orient:vertical;
            }
            .list_total_t{
              height: 112rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 8rpx 0 0rpx 0;
              box-sizing: border-box;
              .cations{
                display: flex;
                align-items: center;
                .cations_info{
                  margin-right: 20rpx;
                  font-size: 24rpx;
                  color: #999;
                }
              }
              .price{
                font-size:28rpx
              }
            }
            
          }
        }
      }
    }
    .footer{
      position: fixed;
      bottom: 100rpx;
      width: 100%;
      height: 120rpx;
      border-radius:10rpx;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      box-sizing: border-box;
      .footer_l{
        display: flex;
        align-items: center;
        .footer_check{
          display: flex;
          align-items: center;
          .all{
            margin-left: 30rpx;
            color: #353535;
            font-size: 28rpx;
          }
        }
        
      }
      .footer_r{
        display: flex;
        align-items: center;
        .footer_total{
          margin-right: 30rpx;
          color: #666;
          font-size: 28rpx;
          span{
            color: #333;
          }
        }
        .Settlement{
          width:120rpx;
          height:56rpx;
          background:rgba(255,61,79,1);
          border-radius:28rpx;
          line-height: 56rpx;
          text-align: center;
          color: #fff;
          font-size: 28rpx;
        }
      }
    }
  }
</style>
